<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="script-tags-for-development.js"></script>
<script>
  var app = angular.module('myApp', ['ngMap']);
  app.controller('EventSimpleController', function($timeout, NgMap) {
    var marker;
    var vm = this;
    NgMap.getMap().then(function(map) {
      vm.map = map;
      marker = map.markers[0];
    });
    vm.centerChanged = function(event) {
      $timeout(function() {
        vm.map.panTo(marker.getPosition());
      }, 3000);
    }
    vm.click = function(event) {
      vm.map.setZoom(8);
      vm.map.setCenter(marker.getPosition());
    }
  });
</script>
</head>

<body ng-controller="EventSimpleController as vm">
  Simple Click Event
  <br/>
  Click the marker to zoom and drag and watch it comes back after 3 seconds.
  <ng-map zoom="4" center="-25.363882, 131.044922" on-center-changed="vm.centerChanged()">
    <marker position="-25.363882, 131.044922" on-click="vm.click()" title="Click to zoom"></marker> 
  </ng-map>
</body>
</html>
